<template>
  <div class="product">
    <!-- 标签栏 -->
    <div class="border">
      <van-tabs :v-model:active="active" swipeable>
        <!-- 全部页 -->
        <van-tab title="全部">
          <div class="all">
            <!-- 文章页 -->
            <!-- 文章标题 -->
            <p class="essaytitle">文章</p>
            <!-- 文章内容 -->
            <ul class="essay">
              <li v-for="(item, index) in essaylist" :key="index">
                <!-- 图片和介绍 -->
                <div class="top">
                  <img :src="item.imgurl" alt="" />
                  <div class="word">
                    <p class="title">{{ item.title }}</p>
                    <p class="content">{{ item.content }}</p>
                  </div>
                </div>
                <!-- 用户和点赞评论 -->
                <div class="bottom">
                  <!-- 用户 -->
                  <div class="left">
                    <img src="@/assets/indeximg/user.png" alt="" />
                    <span>晨安睡不醒</span>
                  </div>
                  <!-- 点赞评论 -->
                  <div class="right">
                    <img src="@/assets/indeximg/Tags.png" alt="" />
                    <span>155</span>
                    <img src="@/assets/indeximg/comment.png" alt="" />
                    <span>155</span>
                  </div>
                </div>
              </li>
              <!-- 更多按钮 -->
              <button>更多相关文章&nbsp;&nbsp;></button>
            </ul>

            <!-- 讨论页 -->
            <div class="topic">
              <!-- 话题标题 -->
              <p class="essaytitle">话题</p>
              <!-- 话题 -->
              <div class="topics">
                <p>
                  <span>#</span> 适合油皮的眼霜推荐 &nbsp; &nbsp;
                  <i>39.1k条讨论</i>
                </p>
                <p>
                  <span>#</span> 大油田也别作死，过度清洁会烂脸 &nbsp; &nbsp;<i
                    >39.1k条讨论</i
                  >
                </p>
                <p>
                  <span>#</span> 白天脸上爱出油，吸油纸还是保湿喷雾 &nbsp;
                  &nbsp;<i>39.1k条讨论</i>
                </p>
              </div>
              <!-- 更多按钮 -->
              <button>更多相关话题&nbsp;&nbsp;></button>
            </div>
            <div class="post">
              <!-- 帖子标题 -->
              <p class="essaytitle">帖子</p>
              <!-- 帖子 -->
              <div class="posts">
                <h3>视黄醇</h3>
                <p># 孕妇禁用的护肤品和化妆品成分</p>
                <!-- 用户和点赞评论 -->
                <div class="bottom">
                  <!-- 用户 -->
                  <div class="left">
                    <img src="@/assets/indeximg/user.png" alt="" />
                    <span>晨安睡不醒</span>
                  </div>
                  <!-- 点赞评论 -->
                  <div class="right">
                    <img src="@/assets/indeximg/Tags.png" alt="" />
                    <span>155</span>
                    <img src="@/assets/indeximg/comment.png" alt="" />
                    <span>155</span>
                  </div>
                </div>
              </div>
              <div class="posts">
                <h3>视黄醇</h3>
                <p># 孕妇禁用的护肤品和化妆品成分</p>
                <!-- 用户和点赞评论 -->
                <div class="bottom">
                  <!-- 用户 -->
                  <div class="left">
                    <img src="@/assets/indeximg/user.png" alt="" />
                    <span>晨安睡不醒</span>
                  </div>
                  <!-- 点赞评论 -->
                  <div class="right">
                    <img src="@/assets/indeximg/Tags.png" alt="" />
                    <span>155</span>
                    <img src="@/assets/indeximg/comment.png" alt="" />
                    <span>155</span>
                  </div>
                </div>
              </div>
              <!-- 更多按钮 -->
              <button>更多相关帖子&nbsp;&nbsp;></button>
            </div>

            <!-- 产品页 -->
            <!-- 产品标题 -->
            <p class="essaytitle">产品</p>
            <!-- 产品内容 -->
            <ul class="product">
              <li v-for="(item, index) in productlist" :key="index">
                <!-- 图片和介绍 -->
                <div class="top">
                  <img :src="item.imgurl" alt="" />
                  <!-- 介绍 -->
                  <div class="word">
                    <p class="title">{{ item.title }}</p>
                    <p class="Englishname">{{ item.Englishname }}</p>
                    <!-- 评分 -->
                    <p class="score">
                      {{ item.score }}
                      <span class="stars">{{ item.stars }}</span>
                      <span class="evaluate"
                        >&nbsp;&nbsp;({{ item.evaluate }})</span
                      >
                    </p>
                    <!-- 产地 -->
                    <p class="country">
                      {{ item.country }}
                      <span class="Price">{{ item.Price }}/</span>
                      <span class="capacity"
                        >&nbsp;&nbsp;{{ item.capacity }}</span
                      >
                    </p>
                  </div>
                </div>
              </li>
              <!-- 更多按钮 -->
              <button>更多相关产品&nbsp;&nbsp;></button>
            </ul>

            <!-- 成分页 -->
            <!-- 成分标题 -->
            <p class="essaytitle">成分</p>
            <!--  成分内容-->
            <div class="element">
              <h2 class="name">视黄醇丙酸酯</h2>
              <div class="englishname">
                <span>RETINYL PROPIONATE</span>
                <img src="@/assets/indeximg/red.png" alt="" />
              </div>
              <div class="button">
                <b>抗衰老</b>
                <b>美白祛斑</b>
                <b>抗氧化剂</b>
              </div>
            </div>
            <div class="element">
              <h2 class="name">视黄醇丙酸酯</h2>
              <div class="englishname">
                <span>RETINYL PROPIONATE</span>
                <img src="@/assets/indeximg/red.png" alt="" />
              </div>
              <div class="button">
                <b>抗衰老</b>
                <b>美白祛斑</b>
                <b>抗氧化剂</b>
              </div>
            </div>
            <div class="element">
              <h2 class="name">视黄醇丙酸酯</h2>
              <div class="englishname">
                <span>RETINYL PROPIONATE</span>
                <img src="@/assets/indeximg/red.png" alt="" />
              </div>
              <div class="button">
                <b>抗衰老</b>
                <b>美白祛斑</b>
                <b>抗氧化剂</b>
              </div>
            </div>
            <!-- 更多按钮 -->
            <button>更多相关成分&nbsp;&nbsp;></button>
          </div>
        </van-tab>

        <!-- 文章页 -->
        <van-tab title="文章">
          <div class="all">
            <!-- 文章标题 -->
            <p class="essaytitle">文章</p>
            <!-- 文章内容 -->
            <ul class="essay">
              <li v-for="(item, index) in essaylist" :key="index">
                <!-- 图片和介绍 -->
                <div class="top">
                  <img :src="item.imgurl" alt="" />
                  <div class="word">
                    <p class="title">{{ item.title }}</p>
                    <p class="content">{{ item.content }}</p>
                  </div>
                </div>
                <!-- 用户和点赞评论 -->
                <div class="bottom">
                  <!-- 用户 -->
                  <div class="left">
                    <img src="@/assets/indeximg/user.png" alt="" />
                    <span>晨安睡不醒</span>
                  </div>
                  <!-- 点赞评论 -->
                  <div class="right">
                    <img src="@/assets/indeximg/Tags.png" alt="" />
                    <span>155</span>
                    <img src="@/assets/indeximg/comment.png" alt="" />
                    <span>155</span>
                  </div>
                </div>
              </li>
              <!-- 更多按钮 -->
              <button>更多相关文章&nbsp;&nbsp;></button>
            </ul>
          </div>
        </van-tab>

        <!-- 讨论页 -->
        <van-tab title="讨论">
          <div class="all">
            <div class="topic">
              <!-- 话题标题 -->
              <p class="essaytitle">话题</p>
              <!-- 话题 -->
              <div class="topics">
                <p>
                  <span>#</span> 适合油皮的眼霜推荐 &nbsp;
                  <i>39.1k条讨论</i>
                </p>
                <p>
                  <span>#</span> 大油田也别作死，过度清洁会烂脸 &nbsp;
                  <i>39.1k条讨论</i>
                </p>
                <p>
                  <span>#</span> 白天脸上爱出油，吸油纸还是保湿喷雾 &nbsp;
                  <i>39.1k条讨论</i>
                </p>
              </div>
              <!-- 更多按钮 -->
              <button>更多相关话题&nbsp;&nbsp;></button>
            </div>
            <div class="post">
              <!-- 帖子标题 -->
              <p class="essaytitle">帖子</p>
              <!-- 帖子 -->
              <div class="posts">
                <h3>视黄醇</h3>
                <p># 孕妇禁用的护肤品和化妆品成分</p>
                <!-- 用户和点赞评论 -->
                <div class="bottom">
                  <!-- 用户 -->
                  <div class="left">
                    <img src="@/assets/indeximg/user.png" alt="" />
                    <span>晨安睡不醒</span>
                  </div>
                  <!-- 点赞评论 -->
                  <div class="right">
                    <img src="@/assets/indeximg/Tags.png" alt="" />
                    <span>155</span>
                    <img src="@/assets/indeximg/comment.png" alt="" />
                    <span>155</span>
                  </div>
                </div>
              </div>
              <div class="posts">
                <h3>视黄醇</h3>
                <p># 孕妇禁用的护肤品和化妆品成分</p>
                <!-- 用户和点赞评论 -->
                <div class="bottom">
                  <!-- 用户 -->
                  <div class="left">
                    <img src="@/assets/indeximg/user.png" alt="" />
                    <span>晨安睡不醒</span>
                  </div>
                  <!-- 点赞评论 -->
                  <div class="right">
                    <img src="@/assets/indeximg/Tags.png" alt="" />
                    <span>155</span>
                    <img src="@/assets/indeximg/comment.png" alt="" />
                    <span>155</span>
                  </div>
                </div>
              </div>
              <!-- 更多按钮 -->
              <button>更多相关帖子&nbsp;&nbsp;></button>
            </div>
          </div>
        </van-tab>

        <!-- 产品页 -->
        <van-tab title="产品">
          <div class="all">
            <!-- 产品标题 -->
            <p class="essaytitle">产品</p>
            <!-- 产品内容 -->
            <ul class="product">
              <li v-for="(item, index) in productlist" :key="index">
                <!-- 图片和介绍 -->
                <div class="top">
                  <img :src="item.imgurl" alt="" />
                  <!-- 介绍 -->
                  <div class="word">
                    <p class="title">{{ item.title }}</p>
                    <p class="Englishname">{{ item.Englishname }}</p>
                    <!-- 评分 -->
                    <p class="score">
                      {{ item.score }}
                      <span class="stars">{{ item.stars }}</span>
                      <span class="evaluate"
                        >&nbsp;&nbsp;({{ item.evaluate }})</span
                      >
                    </p>
                    <!-- 产地 -->
                    <p class="country">
                      {{ item.country }}
                      <span class="Price">{{ item.Price }}/</span>
                      <span class="capacity"
                        >&nbsp;&nbsp;{{ item.capacity }}</span
                      >
                    </p>
                  </div>
                </div>
              </li>
              <!-- 更多按钮 -->
              <button>更多相关产品&nbsp;&nbsp;></button>
            </ul>
          </div>
        </van-tab>

        <!-- 成分页 -->
        <van-tab title="成分">
          <div class="all">
            <!-- 成分标题 -->
            <p class="essaytitle">成分</p>
            <!--  成分内容-->
            <div class="element">
              <h2 class="name">视黄醇丙酸酯</h2>
              <div class="englishname">
                <span>RETINYL PROPIONATE</span>
                <img src="@/assets/indeximg/red.png" alt="" />
              </div>
              <div class="button">
                <b>抗衰老</b>
                <b>美白祛斑</b>
                <b>抗氧化剂</b>
              </div>
            </div>
            <div class="element">
              <h2 class="name">视黄醇丙酸酯</h2>
              <div class="englishname">
                <span>RETINYL PROPIONATE</span>
                <img src="@/assets/indeximg/red.png" alt="" />
              </div>
              <div class="button">
                <b>抗衰老</b>
                <b>美白祛斑</b>
                <b>抗氧化剂</b>
              </div>
            </div>
            <div class="element">
              <h2 class="name">视黄醇丙酸酯</h2>
              <div class="englishname">
                <span>RETINYL PROPIONATE</span>
                <img src="@/assets/indeximg/red.png" alt="" />
              </div>
              <div class="button">
                <b>抗衰老</b>
                <b>美白祛斑</b>
                <b>抗氧化剂</b>
              </div>
            </div>
            <!-- 更多按钮 -->
            <button>更多相关成分&nbsp;&nbsp;></button>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
import { ref } from "vue";
import "vant/es/tab/style";
import "vant/es/tabs/style";
import { getEssaylistApi } from "@/utils/api";
import { getProductlistApi } from "@/utils/api";

export default {
  setup() {
    const active = ref(2);
    return { active };
  },
  data() {
    return {
      essaylist: [],
      productlist: [],
    };
  },

  components: {
    VanTab: Tab,
    VanTabs: Tabs,
  },
  computed: {},

  mounted() {
    this.getEssayData();
    this.getProductData();
  },

  methods: {
    async getEssayData() {
      const res = await getEssaylistApi();
      if (res.status === 0) {
        console.log(res);
        this.essaylist = res.result;
      }
    },
    async getProductData() {
      const res = await getProductlistApi();
      if (res.status === 0) {
        console.log(res);
        this.productlist = res.result;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";

//标签栏
.border {
  text-align: start;
  width: 100%;
  .border-bottom();

  //标签栏
  :deep(.van-tab__text--ellipsis) {
    font-size: 30px;
    font-weight: bold;
    color: #8f8f8f;
    overflow: visible;
    display: inline-block;
  }
  :deep(.van-tabs__wrap) {
    height: 98px;
    .border-bottom();
    position: fixed;
    top: 130px;
    z-index: 999;
    width: 100%;
    background: white;
  }

  //分类内容
  :deep(.van-tab__pane) {
    height: 4000px;
    .all {
      position: relative;
      top: 240px;
    }
    //标签标题
    .essaytitle {
      text-align: start;
      padding: 30px 0 30px 33px;
      font-size: 34px;
      .font_f_w ();
      color: #000000;
    }
    //文章数据
    .essay {
      li {
        height: 224px;
        padding: 29px 39px 25px 32px;
        border-top: 1px solid #f1f1f1;

        //图片和介绍
        .top {
          .between ();
          margin-bottom: 16px;
          img {
            width: 166px;
            height: 108px;
            border-radius: 8px;
          }
          .word {
            width: 480px;
            .font_f_w ();
            color: #343434;

            .title {
              font-size: 26px;
            }
            .content {
              height: 60px;
              line-height: 60px;
              font-size: 24px;
              color: #8b8b8b;
            }
          }
        }

        //用户和点赞评论
        .bottom {
          height: 50px;
          .between ();
          align-items: center;
          font-size: 24px;
          .font_f_w ();
          color: #6d6d6d;

          img {
            margin-bottom: -6px;
            width: 30px;
            height: 30px;
          }
          span {
            margin: 0 15px;
          }
        }
      }
    }

    //更多按钮
    button {
      width: 691px;
      height: 74px;
      background: white;
      border: 0;
      border: 1px solid #aaaaaa;
      font-size: 26px;
      .font_f_w ();
      color: #919191;
      margin: 30px 30px;
    }

    //讨论数据
    .topics {
      font-size: 28px;
      .font_f_w ();
      color: #010101;
      padding: 0px 39px 20px 32px;
      p {
        height: 60px;
        line-height: 60px;
        span {
          color: #78cccd;
        }
        i {
          font-size: 20px;
          color: #afafaf;
        }
      }
    }
    //帖子数据
    .posts {
      font-size: 28px;
      .font_f_w ();
      color: #bdbdbd;
      padding: 0px 39px 20px 32px;
      .border-top();
      h3 {
        height: 60px;
        line-height: 60px;
        color: #68dcdc;
      }
      p {
        padding: 10px 0;
        font-size: 24px;
      }
      .user();
    }
    //产品数据
    .product {
      li {
        height: 224px;
        padding: 29px 39px 25px 32px;
        border-top: 1px solid #f1f1f1;
        p {
          height: 40px;
          line-height: 40px;
        }

        //图片和介绍
        .top {
          .between ();
          margin-bottom: 16px;
          img {
            width: 160px;
            height: 160px;
            border-radius: 8px;
          }
          .word {
            width: 480px;
            .font_f_w ();
            font-size: 30px;
            color: #333333;

            .Englishname {
              font-size: 20px;
              color: #999999;
            }
            //评分
            .score {
              font-size: 28px;
              color: #68dcdc;
              .stars {
                height: 22px;
              }
              .evaluate {
                font-size: 28px;
                font-family: SimSun;
                font-weight: bold;
                color: #666666;
              }
            }
            //产地
            .country {
              font-size: 20px;
              .font_f_w ();
              color: #999999;
            }
          }
        }
      }
    }

    //成分数据
    .element {
      padding: 29px 39px 25px 32px;
      height: 188px;
      font-size: 28px;
      .font_f_w ();
      color: #333;
      .border-top();

      .englishname {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        color: #999999;
        .between();
        img {
          width: 38px;
          height: 38px;
        }
      }
      .button {
        display: flex;
        b {
          display: block;
          padding: 10px 15px;
          border: 1px solid #68dcdc;
          border-radius: 23px;
          text-align: center;
          font-size: 24px;
          font-weight: normal;
          color: #68dcdc;
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
